<template>
  <div class="form-container">
    <!-- form表单 -->
    <el-form :model="queryFormData" class="demo-form-inline" :inline="true" label-position="right" label-width="auto" ref="testBaseForm">
      <el-row class="row-bg">
        <!-- 第一列 -->
        <el-col :span="6">
          <el-form-item label="学科" prop="subject">
            <el-select placeholder="请选择" size="mini" v-model="queryFormData.subject" @change="searchSecondlevel">
              <el-option :key="index" v-for="(item, index) in subjectData" :label="item.subjectName" :value="item.subjectName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题类型" prop="questionType">
            <el-select placeholder="请选择" size="mini" v-model="queryFormData.questionType">
              <el-option v-for="(item, index) in formData" :label="item.questionType == 1 ? '单选' : item.questionType == 2 ? '多选' : '简答'" :value="item.questionType" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注" prop="remarks">
            <el-input size="mini" class="elInput" v-model="queryFormData.remarks"></el-input>
          </el-form-item>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select placeholder="请选择" size="mini" v-model="queryFormData.catalogID">
              <el-option v-for="(item, index) in sempleSubject" :label="item.label" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-select placeholder="请选择" v-model="queryFormData.difficulty" size="mini">
              <el-option v-for="(item, index) in formData" :label="item.difficulty == 1 ? '简单' : item.questionType == 2 ? '一般' : '困难'" :value="item.difficulty" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称" prop="shortName">
            <el-input size="mini" class="elInput" v-model="queryFormData.shortName"></el-input>
          </el-form-item>
        </el-col>
        <!-- 第三列 -->
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select placeholder="请选择" size="mini" v-model="queryFormData.tags"> </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
            <el-select placeholder="请选择" size="mini" v-model="queryFormData.direction">
              <el-option :key="index" v-for="(item, index) in formData" :label="item.direction" :value="item.direction"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="province">
            <el-select placeholder="请选择" size="mini" class="selectoption" v-model="queryFormData.province" @change="changeCity">
              <el-option v-for="(item, index) in mapData" :label="item" :value="item" :key="index"></el-option>
            </el-select>
            <el-select placeholder="请选择" size="mini" class="selectoption" v-model="queryFormData.city">
              <el-option v-for="(item, index) in citysData" :label="item" :value="item" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 第四列 -->
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input size="mini" class="elInput" v-model="queryFormData.keyword"></el-input>
          </el-form-item>
          <el-form-item label="录入人" prop="creatorID">
            <el-select placeholder="请选择" size="mini" v-model="queryFormData.creatorID">
              <el-option :key="index" v-for="(item, index) in formData" :label="item.creator" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="elBtn">
            <el-button size="mini" @click="clearForm">清除</el-button>
            <el-button type="primary" size="mini" @click="searchTestBase">
              搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 引入请求题库的请求
import { TestbaseList, getSubject, getSubjecSecond } from '../../../api/components/component'
// 引入地图数据包
import { provinces, citys } from '../../../../public/citys'
// 引入传值文件
import bus from './brotherByValue'

export default {
  data() {
    return {
      // 拿到的表单信息
      formData: {},
      // 绑定的表单信息
      queryFormData: {
        // 学科
        subject: '',
        // 试题类型
        questionType: '',
        // 题目备注
        remarks: '',
        // 难度
        difficulty: '',
        // 企业简称
        shortName: '',
        // 标签
        tags: '',
        // 方向
        direction: '',
        // 省份
        province: '',
        // 地区
        city: '',
        // 关键字
        keyword: '',
        // 录入人
        creatorID: '',
        // 目录
        catalogID: ''
      },
      // 地图数据包
      mapData: [],
      // 城市数据包
      citysData: {},
      // 学科列表信息
      subjectData: [],
      // 二级目录信息
      sempleSubject: []
    }
  },
  methods: {
    // 监听学科下拉
    async searchSecondlevel(value) {
      const { data } = await getSubjecSecond({ value })
      this.sempleSubject = data
      // 每次切换一级目录把二级目录清空
      this.queryFormData.catalogID = 0
    },
    // 按钮
    async searchTestBase() {
      // 点击搜索按钮 拿取题库数据
      const { data } = await TestbaseList(this.queryFormData)
      this.$message.success('搜索成功')
      // 把数据传给表格组件,并渲染到视图
      bus.$emit('serchData', data)
    },
    // 点击清除按钮
    clearForm() {
      this.$refs.testBaseForm.resetFields()
      this.$message.success('已清除表单')
    },
    // 省级选择框触发change事件渲染市级选择框
    changeCity(province) {
      console.log(province)
      // 拿到地区数据后赋值
      this.citysData = citys(province)
      // 每次切换城市清除地区信息
      this.queryFormData.city = ''
    },
    // 获取列表信息
    async getTestBaselist() {
      try {
        const { data } = await TestbaseList()
        this.formData = data.items
        //  把数据传输到兄弟组件tab
        bus.$emit('onformData', data)
      } catch (error) {
        this.$message.error('很抱歉，获取信息失败')
      }
    },
    // 获取学科列表
    async getSubjectList() {
      const { data } = await getSubject()
      this.subjectData = data.items
    }
  },
  created() {
    this.getTestBaselist()
    this.mapData = provinces()
    // 获取学科信息
    this.getSubjectList()
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
.form-container {
  .row-bg {
    .elBtn {
      margin-left: 133px;
    }
  }
  margin-top: 10px;

  .el-form-item {
    .selectoption {
      width: 94px;
      margin-right: 2px;
    }
    margin-bottom: 10px;
    font-weight: 700;
    .elInput {
      width: 190px;
    }
  }
}
</style>
